<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Break My Heart - D.N.A.张艺兴</title>
  <!-- 简写link:favicon,再回车即可 -->
  <link rel="shortcut icon" href="./assets/logo.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/base.css">
  <script type="module" src="./js/index.js"></script>
</head>
<body>
  <div class="content">
    <!-- 左边 -->
    <div class="left-wrapper">
      <div class="music-info-box">
        <image class="music-info-logo" src="./assets/logo.jpg"></image>
        <div class="music-info-title">Break My Heart - D.N.A.张艺兴</div>
        <div class="music-info-songer">D.N.A., 张艺兴, vinida万妮达, GILI</div>
      </div>
      <audio class="music-control" controls src="./assets/BreakMyHeart.mp3"></audio>
    </div>
    <!-- 右边 -->
    <div class="right-wrapper">
      <ul class="lrc-list">
        <!-- li*30>lorem3 -->
        <!-- 技巧：写一个lorem，意思是乱数假文,能自动生成随机语句。lorem3,后面跟一个数字,代表生成几个随机单词 -->
        <!-- <li>Lorem, ipsum dolor.</li>
        <li>Consequatur, accusantium vitae.</li>
        <li>Voluptates, in et.</li>
        <li>Nesciunt, sed! Dolorem.</li>
        <li>Unde, molestias illo.</li>
        <li>Veniam, assumenda iure.</li>
        <li>Et, aliquam sit?</li>
        <li>Velit, dignissimos eum?</li>
        <li>Numquam, eos aspernatur!</li>
        <li>Ratione, dignissimos quasi!</li>
        <li>Velit, dignissimos asperiores?</li>
        <li>Atque, quo ad?</li>
        <li>Optio, aperiam sint.</li>
        <li>Placeat, labore porro.</li>
        <li>Dolor, impedit magnam.</li>
        <li>Iure, quam molestiae.</li>
        <li>Ea, ipsum ullam.</li>
        <li>Distinctio, minima mollitia!</li>
        <li>Provident, a iste!</li>
        <li>Adipisci, earum quis?</li>
        <li>Cum, laborum sed!</li>
        <li>Eius, deleniti quis!</li>
        <li>Ratione, culpa voluptatem.</li>
        <li>Laboriosam, quia mollitia?</li>
        <li>Minus, natus ut!</li>
        <li>Maiores, cum quas.</li>
        <li>A, numquam iste?</li>
        <li>Nobis, error eveniet.</li>
        <li>Delectus, illum autem.</li>
        <li>Nisi, et suscipit.</li> -->
      </ul>
    </div>
  </div>
</body>
</html>